//编辑canvase绘画相关代码
/*canvas界面绘制部分使用请调用*/
//画坐标轴线
function drawDashLine(canvas, elementTypes) {
	var ctx = canvas.getContext('2d');
	ctx.restore();
	ctx.beginPath();
	ctx.moveTo(35, 660);
	ctx.lineTo(canvas.width, 660);
	ctx.moveTo(95, 50);
	ctx.lineTo(95, 690);
	ctx.save();
	ctx.stroke();
	
	ctx.font = "20px Arial";
	//写名称画虚线
	for (var i = 0; i < elementTypes.length; i++) {
		ctx.fillText(elementTypes[i].text, 10, (135 + 40 * i));
		ctx.save();
		ctx.setLineDash([ 15, 5 ]);
		ctx.lineWidth = 0.5;
		ctx.beginPath();
		ctx.moveTo(10, (150 + 40 * i));
		ctx.lineTo(canvas.width, (150 + 40 * i));
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
	}
}
/*绘制条件轴区域*/
// var axis=["004002","007001","010001"];//有回显功能的元素条件
function drawConditionArea(canvas, obj, elementTypes) {
	//条件轴坐标原点为下面小矩形右下角顶点
	var ctx = canvas.getContext('2d');
	ctx.restore();
	ctx.beginPath();
	ctx.strokeRect(obj.x, 660, -40, -20);
	ctx.stroke();
	/*绘制矩形上的虚线*/
	ctx.beginPath();
	ctx.save();
	ctx.setLineDash([ 15, 5 ]);
	ctx.moveTo(obj.x - 20, 660 - 20);
	ctx.lineTo(obj.x - 20, 660 - 550);
	ctx.stroke();
	ctx.restore();
	ctx.beginPath();/*绘制虚线上的三角形*/
	ctx.moveTo(obj.x - 20, 660 - 550);
	ctx.lineTo(obj.x - 40, 660 - 570);
	ctx.lineTo(obj.x, 660 - 570);
	ctx.closePath();
	ctx.fillStyle = obj.color;
	ctx.fill();
	ctx.beginPath();//绘制条件轴限定区域
	objx = obj.x - 20;
	ctx.moveTo(objx, 660 - 550);
	ctx.save();
	ctx.strokeRect(objx, 110, obj.width, 40 * elementTypes.length);
	//绘制辅助虚线
	for(var i=1;i<obj.width/90;i++){
		ctx.save();
		ctx.setLineDash([ 15, 5 ]);
		ctx.lineWidth = 0.5;
		ctx.beginPath();
		ctx.moveTo((objx + 90 * i),110);
		ctx.lineTo((objx + 90 * i),110+40 * elementTypes.length);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
	}
	var childrens = obj.children;
	if (childrens) {//条件轴内所有的元素
		for (var j = 0; j < childrens.length; j++) {//遍历条件轴内所有的元素
			drawDiagonal(canvas,childrens[j]);
		}
	}		
}
/*绘制信号图形*/
function drawSignal(canvas,obj) {
	var ctx = canvas.getContext('2d');
	ctx.restore();
	ctx.beginPath();/*绘制竖线*/
	ctx.moveTo(obj.x, 660);
	ctx.lineTo(obj.x, 660 - 60);
	ctx.stroke();
	/*竖线上的圆形*/
	ctx.beginPath();
	ctx.arc(obj.x, 660 - 80, 20, 0, Math.PI * 2, true);
	ctx.stroke();
	ctx.save();
	ctx.closePath();
}
/*绘制公里标图*/
function drawKvalueMap(canvas,obj) { 
	var ctx = canvas.getContext('2d');
	ctx.restore();
	ctx.beginPath();
	ctx.moveTo(obj.x, 660);
	ctx.lineTo(obj.x, 660 - 60);
	ctx.stroke();
	ctx.closePath();//竖线绘制完成
	ctx.beginPath();/*K值上的矩形*/
	ctx.moveTo(obj.x - 20, 660 - 60);
	ctx.strokeRect(obj.x + 35, 660 - 60, -70, -30);
	ctx.font = "20px Courier New";//设置字体样式
	ctx.fillStyle = "black";//设置字体填充颜色
	var text = "K0.101"; //矩形内的文本内容 
	ctx.fillText(text, obj.x - 25, 660 - 70);
	ctx.stroke();
	ctx.save();
	ctx.closePath();
}
/*绘制右上方的模式曲线示意图*/
function drawGraph(canvas) {
	var ctx = canvas.getContext('2d');
	ctx.beginPath();/*右上方的矩形示意图*/
	ctx.strokeRect(625, 5, 175, 80);
	var text = "曲线示意图";
	ctx.fillText(text, 625, 10);
	ctx.stroke();
	var img = new Image(); /*绘制图片*/
	img.src = "../../images/curve.PNG";
	img.onload = function() {
		ctx.drawImage(img, 625, 25);
	};
}
//绘画内部小矩形
function drawDiagonal(canvas,obj) {
	var ctx = canvas.getContext('2d');
	console.log(obj.text.length);
	if(obj.text.length>3){
		ctx.font = "14px Arial";
	}else{
		ctx.font = "20px Arial";
	}
	
	if(obj.fontcolor!=="#000000"){//如果是默认画小矩形
			ctx.strokeStyle = obj.color;
			ctx.beginPath();
			/*绘制生成元素的矩形*/
			ctx.rect(obj.x, obj.y, obj.width, obj.hight);//绘制矩形的参数，x,y轴位置和宽高
			ctx.stroke();
			ctx.textBaseline = 'hanging';
			ctx.fillStyle = "#00AAAA";
			// 矩形内插入文字
			
			ctx.fillText(obj.text, obj.x + 10, obj.y + 10);
	}else{//如果是点击重绘的画
		ctx.strokeStyle = obj.color;
		ctx.beginPath();
		/*绘制生成元素的矩形*/
		ctx.rect(obj.x, obj.y, obj.width, obj.hight);//绘制矩形的参数，x,y轴位置和宽高
		ctx.stroke();
		ctx.textBaseline = 'hanging';
		ctx.fillStyle = obj.fontcolor;
		// 矩形内插入文字
		ctx.fillText(obj.text, obj.x + 10, obj.y + 10);
	}
}
//重绘元素小矩形
function redrawDiagonal(ctx,obj) {
			ctx.strokeStyle = obj.color;
			ctx.beginPath();
			/*绘制生成元素的矩形*/
			ctx.rect(obj.x, obj.y, obj.width, obj.hight);//绘制矩形的参数，x,y轴位置和宽高
			ctx.stroke();
			ctx.textBaseline = 'hanging';
			ctx.fillStyle = "#00AAAA";
			if(obj.text.length>3){
				ctx.font = "14px Arial";
			}else{
				ctx.font = "20px Arial";
			}
			// 矩形内插入文字
			ctx.fillText(obj.text,obj.x + 10, obj.y + 10);
		}

//清空画布中的元素
function emptyElements(canvas) {
	var context = canvas.getContext('2d');
	// 清空画布内的所有元素
	context.clearRect(0, 0, canvas.width, canvas.height);
	// 绘制坐标轴和直线
	drawDashLine(canvas, elementTypes);
	// 直接清空原始数组即可
	caseElements.splice(0, caseElements.length);
}
// 删除当前选中的单个元素
function deleteElements(canvas, caseElements) {
	//获取选中元素下标
	var selections = getSelectElements(caseElements);
	var index = -1;
	var index1 = -1;
	var index2 = -1;
	if (selections.length == 1) {
		index = selections[0];
		caseElements.splice(index, 1);//删除选中的元素
		//更新元素顺序
		for (var i = 0; i < caseElements.length; i++) {
			caseElements[i].displayOrder=i+1;
		}
	} else if (selections.length == 2) {
		// 拿到被选中元素的下标
		index1 = selections[0];
		index2 = selections[1];
		caseElements[index1].children.splice(index2, 1);
		//更新元素顺序
		for (var j = index2; j < caseElements[index1].children.length; j++) {
			caseElements[index1].children[j].displayOrder=j+1;
		}
	}
	draw(canvas, elementTypes, caseElements);
}
function clearElement(canvas,x,y,width,height){//元素小矩形重绘
	var context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);

}
//在canvas内绘制caseElements元素  value是回显的文本
function draw(canvas, elementTypes, caseElements) {
	// 清空画布内的内容
	var context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);
	// 绘制坐标轴和直线
	drawDashLine(canvas, elementTypes);
	// 重新绘制条件轴图形
	if (caseElements) {
		for (var i = 0; i < caseElements.length; i++) {
			if (caseElements[i].type == "011") {
				drawConditionArea(canvas,caseElements[i],elementTypes);
			} else if (caseElements[i].type == "012") {
				drawSignal(canvas,caseElements[i]);
			} else if (caseElements[i].type == "013") {
				drawGraph(canvas);
			} else if (caseElements[i].type == "014") {
				drawKvalueMap(canvas,caseElements[i]);
			}
		}
	}
}
//绘制基本用例矩形
function Thumbnails(canvas,baseCase,color){
	var context = canvas.getContext('2d');
    context.beginPath();//绘制矩形
    context.strokeStyle =color; //矩形内的颜色
    context.strokeRect(baseCase.x,baseCase.y,baseCase.width,baseCase.height);
    context.beginPath();//绘制矩形内文字
    context.fillStyle ="#337AB7" ; //矩形内文字的颜色
    context.font = "20px Arial";
    context.fillText(baseCase.caseName,baseCase.x+20,24);
    context.stroke();
}
//清空所有的基本用例矩形边框的颜色
function drawThumbnails(canvas,sequenceInfo,caseSelectIndex){
	var context = canvas.getContext('2d');
	context.clearRect(0, 0,canvas.width,canvas.height);//清空缩略图
	var currentX = 5;
    for(var i=0;i<sequenceInfo.length;i++){
       var color="rgb(128,138,135)";//每次点击时，所有的基本用例框都是灰色
       //定义缩略图位置信息
       sequenceInfo[i].x=currentX;
       sequenceInfo[i].y=3;
       sequenceInfo[i].width=caseWidth;
       sequenceInfo[i].height=caseHeight;
       sequenceInfo[i].sort =(i+1)+"";
       currentX+=155;  
       if(caseSelectIndex==sequenceInfo[i].sort){
    	   color="rgb(225,0,0)";//选中的基本用例设置为红色
       }
       //绘制序列缩略图内的所有基本用例
        Thumbnails(canvas,sequenceInfo[i],color);
  }
 } 
//画测试序列中的坐标轴直线
function canvasT(canvas){
	var context = canvas.getContext('2d');
	context.beginPath(); 
	context.moveTo(20, 130); 
	context.lineTo(940, 130);
	context.stroke();
  }
//画小信号机
function signalMachine(canvas){
	var context = canvas.getContext('2d');
	context.beginPath(); 
	context.moveTo(70, 130); 
	context.lineTo(70, 70);
	context.stroke();
	context.beginPath();//画圆
	context.arc(70,60,10,0,Math.PI*2,true);
	context.stroke();
	context.closePath();
  }
//画基础数据图
function drawBasicData(canvas,basicData){
	var index = 20;
	var gap = 45;
	var context = canvas.getContext('2d');
	var width = (gap+10)*basicData.length;
	canvas.width = width;
	context.beginPath();
    context.moveTo(20,110);
    context.lineTo(width,110);
    context.stroke();
    context.closePath();
	for(var i=0;i<basicData.length;i++){
		if(basicData[i].type==1){
		index = drawTrainStation(index,gap,basicData[i].trainstation,canvas);
		}else if(basicData[i].type==2){
		index =	drawTeleseme(index,gap,basicData[i].teleseme,canvas);
		}
	}
}
//在画布上绘制才车站信息
function drawTrainStation(index,gap,trainstation,canvas){
	var name = trainstation.name;
	var x = index+gap;
	var context = canvas.getContext('2d');
	context.beginPath();
    context.moveTo(x,70);
    context.lineTo(x,110);
    context.stroke();
    context.closePath();//绘制短长直线
    context.fillText(name,x-10,35);//写站名
    context.save();
  //画小圆
    context.beginPath();
    context.arc(x,55,8,0,Math.PI*2,true);
    context.stroke();
    context.closePath();
    //画大圆粗线条
    context.lineWidth = 3;
    context.beginPath();
    context.arc(x,55,15,0,Math.PI*2,true);
    context.stroke();
    context.closePath();
    context.restore();
	return x;
}
//在画布上绘制信号机信息
function drawTeleseme(index,gap,teleseme,canvas){
	var name = teleseme.name;
	var offSet = teleseme.offSet/1000; 
	var liCheng = teleseme.liCheng;
	var x = index+gap+offSet;
	var context = canvas.getContext('2d');
	context.beginPath();
    context.moveTo(x,90);
    context.lineTo(x,110);
    context.stroke();
    context.closePath();//绘制短长直线
    context.fillText(name,x-5,57);
    context.fillText(liCheng/1000,x-10,120);
    context.save();
    context.beginPath();
    context.arc(x,75,15,0,Math.PI*2,true);
    context.stroke();
    context.closePath();
	return x;
}
// //画布内容放大缩小
// function scale(x,y){
// //x、y同时放大或缩小
//           //context.save();  //�ȱ����»�ͼ״̬
//              //context.translate(150, 150);  //����λ�Ʋ���
//  //更新当前画布内所有元素的坐标
//  scaleX=scaleX*x;
//  scaleY=scaleY*y;
//  for(var i=0;i<elementTypes.length;i++){
//      elementTypes[i].x1 = elementTypes[i].x1*x;
//      elementTypes[i].x2 = elementTypes[i].x2*x;
//      elementTypes[i].y1 = elementTypes[i].y1*y;
//      elementTypes[i].y2 = elementTypes[i].y2*y;
//   }
// for(var i=0;i<caseElementss.length;i++){
// caseElementss[i].x=caseElementss[i].x*x;
// caseElementss[i].y=caseElementss[i].y*y;
// caseElementss[i].width=caseElementss[i].width*x;
// caseElementss[i].hight=caseElementss[i].hight*y;
// }
//  draw();
// }
// 元素拖拽时不可被覆盖功能
// 遍历画布中所有的元素
// for(var i=0;i<caseElementss.length;i++){
//     var xs = caseElements[i].x;
//     var ys = caseElements[i].y;
//     var width = caseElements[i].width;
//     var hight = caseElements[i].hight;
//     var leve = caseElements[i].leve;
//     var type = caseElements[i].type;
//     //画布内已有元素的坐标
//     var x1 =xs;// 起始点x位置
//     var x2 =xs+width;// 结束点x位置
//     var y1 =ys;// 起始点y位置
//     var y2 =ys+hight;// 结束点y位置
//     // 更新选中元素的位置信息
//      }
// caseElements[index].y = y;
// // 拖动元素的坐标值
// var xx1=caseElements[index].x;
// var xx2=caseElements[index].x+caseElements[index].width;
// var yy1=caseElements[index].y
// var yy2=caseElements[index].y+caseElements[index].hight;
// 判断拖动的元素能否和画布中的元素重叠
// if(xx1>=x1&&xx2<=x2&&yy1==y1&&yy2==y2){
//  console.log("元素不能重叠"); 
// } 

// else{
//  // 更新画布中选中的元素
// }   